<template>
  <div>
    <div style="padding:30px;">
      <el-alert :closable="false" title="表单列表">
        <router-view />
      </el-alert>
    </div>

    <div style="padding:30px;">
      <div>
        <router-link :to="{path:'/nested/form/form'}">
          <el-button type="primary" size="small">新增</el-button>
        </router-link>
      </div>
      <el-table :data="formList" style="width: 100%;">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <router-link :to="{ path: '/nested/form/view', query: { formId: scope.row.id }}">
              <el-button type="text" size="small">查看</el-button>
            </router-link>
            <router-link :to="{ path: '/nested/form/form', query: { formId: scope.row.id }}">
              <el-button type="text" size="small">编辑</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listForm } from '@/api/form'

export default {
  data() {
    return {
      formList: []
    }
  },
  created() {
    listForm().then(data => {
      this.formList = data.data
    })
  }

}
</script>
